<template>
  <div id="">
    <h2 v-title="'实名认证'"></h2>

    <ul class="formUl">
      <li class="">
        <span class="formTit">真实姓名</span>
        <input type="text" name="" v-model="realName" placeholder="请输入姓名">
      </li>
      <li class="">
        <span class="formTit">身份证号</span>
        <input type="text" name="" v-model="userIdCard" placeholder="请输入身份证号">
      </li>
    </ul>
    <div class="pt10">
      <span class="formTit mb10 p10">身份证照片</span>
      <div class="imgUploader">
        <div class="uploaderDiv">
          <mo-upload flag="'thumbnail'" @complete="uploadComplete" class="moupload">
            <img :src="idCardPic1" alt="" class="uploadImg">
          </mo-upload>
          <p class="mt10">正面</p>
        </div>
        <div class="uploaderDiv">
          <mo-upload flag="'thumbnail'" @complete="uploadComplete2" class="moupload">
            <img :src="idCardPic2" alt="" class="uploadImg">
          </mo-upload>
          <p class="mt10">反面</p>
        </div>
      </div>
    </div>
    <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="submitDoreal">确定</button>
    </div>
  </div>
</template>
<script>
import MoUpload from '@/components/upload.vue';
import { Toast } from 'mint-ui';
import {reLoginWX} from '@/util/util.js';
export default {
  name: "",
  data: () => ({
    realName:'',
    userIdCard:'',
    idCardPic1: '',   //身份证正面img
    idCardPic2: '',  //身份证背面img
  }),
  components: {
    MoUpload,
  },
  methods: {
    // 提交认证
    submitDoreal() {
      let that = this;
      let realName = that.realName;
      let userIdCard = that.userIdCard;
      let idCardPic1 = that.idCardPic1;
      let idCardPic2 = that.idCardPic2;

      if(realName=='') {
        Toast('请填写真实姓名');
        return false;
      }
      if(userIdCard=='') {
        Toast('请填写身份证号码');
        return false;
      }
      if(idCardPic1=='') {
        Toast('请上传身份证正面照');
        return false;
      }
      if(idCardPic2=='') {
        Toast('请上传身份证反面照');
        return false;
      }
      let doRealParam = {
        realName:realName,
        userIdCard:userIdCard,
        idCardPic1:idCardPic1,
        idCardPic2:idCardPic2
      }
      network.post(configUrl.DOREAL_URL,doRealParam,function(res){
        console.log(res);
        if(res.code==401) {
          reLoginWX();
        }else{
          that.$router.go(-1);
        }
      },function(err){
        console.log(err);
      });
    },
    // 七牛图片上传处理
    uploadComplete(status, result, uploadResult, flag) {
       // var addr = 'http://opf2ucy0n.bkt.clouddn.com/';
       console.log(uploadResult);
      console.log(result);
        if (status == 200) { //
            this.idCardPic1 = uploadResult.link+'/'+result.key //七牛域名 + 返回的key 组成文件url
        } else {
            //失败处理
        }
    },
    uploadComplete2(status, result, uploadResult, flag) {
       // var addr = 'http://opf2ucy0n.bkt.clouddn.com/';
       console.log(uploadResult);
      console.log(result);
        if (status == 200) { //
            this.idCardPic2 = uploadResult.link+'/'+result.key //七牛域名 + 返回的key 组成文件url
        } else {
            //失败处理
        }
    },
  }
}
</script>
<style lang="scss">
.moupload{
  position: relative;
  .uploadImg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 148px;
    z-index: 33;
  }
}

.fixedBottom{
  position: fixed;
  bottom: 20px;
  left: 0; right: 0;
  padding:10px;
  z-index: 2;
}
.imgUploader{
  @include flex;
  margin-top: 10px;
  .uploaderDiv{
    @include flexcell;
    padding: 0 10px;
    text-align: center;
  }
}
.avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 7rem;
    background: $eeeColor;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 7rem;
    line-height: 7rem;
    text-align: center;
    color: white;
    font-weight: bold;
  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
.formUl{
  background: $eeeColor;
  padding-bottom: 10px;
  li{
    background: white;
    margin-bottom: 1px;
    @include flex;
    justify-content: space-between;
    padding:10px 10px;
    input{
      border: none;
      max-width: 60%;
      text-align: right;
      font-size: 1rem;
    }
  }
}
.formTit{
  font-size: 1.1rem;
}

</style>
